<template>
    <view class="luck-draw-nine-grid-main">
        <view class="luck-container" :style="{ background: bgLuckUrl }">
            <swiper v-if="props.hornData.length" circular autoplay :interval="2000" vertical class="horn">
                <swiper-item v-for="(item, index) in props.hornData" :key="index" class="horn-item">
                    <view
                        >用户{{ item.mobile
                        }}{{ item.awardStatus === 1 ? '参与了抽奖' : '抽中了' + item.awardName }}</view
                    >
                </swiper-item>
            </swiper>
            <view v-else class="horn">超多奖品等您来抽</view>
            <view class="luck-item-container">
                <view
                    v-for="(item, index) in props.activityInfo.luckDrawTurntable"
                    :key="index"
                    :class="['luck-item', Data.amplification_index === item.active_index ? 'active' : '']"
                    :style="{ background: bgLuckItem }">
                    <!-- 开始 -->
                    <view
                        @click="handlerActivityRotaryDraw"
                        class="click-draw"
                        v-if="item.active_index === -1"
                        :style="{ background: luckBtn }">
                        <view class="click-index">
                            <view class="luck-btn">{{ item.awardName }}</view>
                            <view v-if="props.drawStatus === 0" class="luck-status">未开始</view>
                            <view v-else-if="props.drawStatus === 2" class="luck-status">已结束</view>
                            <view v-else class="luck-status"
                                >{{ props.isLogin ? '剩余' : '每天'
                                }}{{
                                    props.isLogin ? props.drawNum : props.activityInfo.luckDrawConfig.everyDayNum
                                }}次</view
                            >
                        </view>
                    </view>
                    <block v-if="item.active_index !== -1">
                        <view class="setup-title">
                            <image
                                :src="
                                    item.awardImg && item.awardImg !== 'default'
                                        ? item.awardImg
                                        : getImgOssUrl('/ui-prod-2.4.0/pop-up-smile.png')
                                "
                                class="prize-img" />
                            <view class="name">{{ item.awardName }}</view>
                        </view>
                        <view class="active-view"></view>
                    </block>
                </view>
            </view>
        </view>
    </view>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
import { onShow } from '@dcloudio/uni-app';
import { debounce } from 'lodash';
import { getImgOssUrl, timeDiff } from '@/commons/utils';

const emit = defineEmits(['startLuck', 'endLuck']);

const props = defineProps({
    // 是否登陆
    isLogin: {
        type: Boolean,
        default: false
    },
    // 剩余抽奖次数
    drawNum: {
        type: [Number, String],
        default: 0
    },
    // 抽奖状态
    drawStatus: {
        type: [Number, String],
        default: 0
    },
    // 活动信息
    activityInfo: {
        type: Object,
        default: () => {
            return {};
        }
    },
    hornData: {
        type: Array,
        default: () => {
            return [];
        }
    }
});

const bgLuckUrl = ref(`url(${getImgOssUrl('/ui-prod-2.4.0/luck-bg@2x.png')})`);
const bgLuckItem = ref(`url(${getImgOssUrl('/ui-prod-2.4.0/luck-single-bg.png')})`);
const luckBtn = ref(`url(${getImgOssUrl('/ui-prod-2.4.0/luck-btn-bg@2x.png')})`);

const isLogin = ref(false);
const Data = reactive({
    amplification_index: 0, //轮盘的当前滚动位置
    roll_flag: true, //是否允许滚动
    max_number: 8, //轮盘的全部数量
    speed: 300, //速度，速度值越大，则越慢 初始化为300
    myInterval: '', //定时器
    max_speed: 40, //滚盘的最大速度
    minturns: 8, //最小的圈数为2
    runs_now: 0, //当前已跑步数
    luck_num: 0, // 中奖位置！！！！！！！！！！！！！！！！！！！！！！！！！
    end_amp: 0, //上一次滚动的位置
    start_flag: true,
    isLucking: false, // 是否正在抽奖中
    freeNumber: 0,
    activityInfo: {}, // 活动信息
    hornData: [], // 顶部喇叭信息
    winPrizeMes: {}, // 中奖信息信息
    isWinning: true, // 是否中奖
    drawNum: 0, // 抽奖剩余次数
    drawDayNum: 0, // 邀请好友获得次数
    drawStatus: 0, // 抽奖状态：0 未开始 1 进行中 2 已结束
    hasLuckNum: false,
    hasRealPrize: false
});
const rolling = () => {
    Data.myInterval = setTimeout(() => {
        rolling();
    }, Data.speed);
    Data.runs_now = Data.runs_now + 1; //已经跑步数加一
    Data.amplification_index = Data.amplification_index + 1; //当前的加一
    //获取总步数，接口延迟问题，所以最后还是设置成1s以上
    let count_num = Data.minturns * Data.max_number + Data.luck_num - Data.end_amp;
    //上升期间
    if (Data.runs_now <= (count_num / 3) * 2) {
        Data.speed -= 30; //加速
        if (Data.speed <= Data.max_speed) {
            Data.speed = Data.max_speed; //最高速度为40；
        }
    } else if (Data.runs_now >= count_num) {
        //抽奖结束
        clearInterval(Data.myInterval);
        Data.roll_flag = true;
        Data.end_amp = Data.amplification_index;
        Data.start_flag = true;
        emit('endLuck');
    } else if (count_num - Data.runs_now <= 10) {
        //下降期间
        Data.speed += 20;
    } else {
        //缓冲区间
        Data.speed += 10;
        if (Data.speed >= 100) {
            Data.speed = 100; //最低速度为100；
        }
    }
    // 判定！是否大于最大数
    if (Data.amplification_index > Data.max_number) {
        Data.amplification_index = 1;
    }
};
const handlerActivityRotaryDraw = debounce(async () => {
    emit('startLuck');
}, 400);

const startRolling = index => {
    Data.luck_num = props.activityInfo.luckDrawTurntable[index].active_index;
    //初始化步数
    Data.runs_now = 0;
    //当前可以点击的状态下
    if (Data.roll_flag) {
        Data.roll_flag = false;
        //启动滚盘，
        rolling();
    }
};

onMounted(() => {});

onShow(() => {});

defineExpose({
    startRolling
});
</script>
<style lang="scss" scoped src="./nineGrid.scss"></style>
